<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import { Layout, Menu, Typography } from 'ant-design-vue';

const { Title } = Typography;
const { Sider, Content } = Layout;
const route = useRoute();
const router = useRouter();

// 当前选中的菜单项
const selectedMenuKey = ref('today-departure');

// 展开的菜单项 - 使用 openKeys 来控制展开状态
const openKeys = ref([
  'today-todo',
  'order-status',
  'group-booking',
  'external-orders',
  'business-records',
]);

// 菜单项配置
const menuItems = [
  {
    key: 'today-todo',
    label: '今日待办',
    icon: 'ant-design:calendar-outlined',
    children: [
      { key: 'today-arrival', label: '今日预抵' },
      { key: 'today-departure', label: '今日预离' },
      { key: 'today-checkin', label: '今日入住' },
      { key: 'today-departed', label: '今日已离' },
      { key: 'should-depart', label: '应离未离' },
    ],
  },
  {
    key: 'order-status',
    label: '订单状态',
    icon: 'ant-design:file-text-outlined',
    children: [
      { key: 'in-reservation', label: '预订中' },
      { key: 'in-stay', label: '在住中' },
      { key: 'checked-out', label: '已退房' },
      { key: 'on-account', label: '已挂账' },
      { key: 'noshow', label: 'NOSHOW' },
      { key: 'all-reservations', label: '全部预订' },
      { key: 'all-registrations', label: '全部登记' },
      { key: 'cancelled', label: '已取消' },
    ],
  },
  {
    key: 'group-booking',
    label: '联房团队',
    icon: 'ant-design:team-outlined',
    children: [
      { key: 'group-reservation', label: '团队预订' },
      { key: 'group-in-stay', label: '团队在住' },
    ],
  },
  {
    key: 'external-orders',
    label: '外部订单',
    icon: 'ant-design:global-outlined',
    children: [
      { key: 'ctrip-orders', label: '携程订单' },
      { key: 'meituan-orders', label: '美团订单' },
      { key: 'in-stay-deposit', label: '在住押金' },
    ],
  },
  {
    key: 'business-records',
    label: '业务记录',
    icon: 'ant-design:history-outlined',
    children: [
      { key: 'card-making', label: '制卡记录' },
      { key: 'security-upload', label: '公安上传记录' },
    ],
  },
];

// 获取当前页面标题
const currentPageTitle = computed(() => {
  const findMenuItem = (items: any[], key: string): any => {
    for (const item of items) {
      if (item.key === key) return item;
      if (item.children) {
        const found = findMenuItem(item.children, key);
        if (found) return found;
      }
    }
    return null;
  };

  const menuItem = findMenuItem(menuItems, selectedMenuKey.value);
  return menuItem ? menuItem.label : '订单管理';
});

// 菜单展开/收缩处理
const handleOpenChange = (keys: string[]) => {
  openKeys.value = keys;
};

// 菜单点击处理
const handleMenuClick = ({ key }: { key: string }) => {
  selectedMenuKey.value = key;

  // 根据菜单项跳转到对应页面
  switch (key) {
    case 'card-making': {
      router.push('/hotel/order-management/card-making');

      break;
    }
    case 'security-upload': {
      router.push('/hotel/order-management/security-upload');

      break;
    }
    case 'today-departure': {
      router.push('/hotel/order-management');

      break;
    }
    default: {
      // 这里可以根据不同的菜单项加载不同的数据
      console.log(`切换到: ${currentPageTitle.value}`);
    }
  }
};

// 根据当前路由设置选中的菜单项
const setSelectedMenuByRoute = () => {
  const path = route.path;
  if (path.includes('card-making')) {
    selectedMenuKey.value = 'card-making';
  } else if (path.includes('security-upload')) {
    selectedMenuKey.value = 'security-upload';
  } else {
    selectedMenuKey.value = 'today-departure';
  }
};

onMounted(() => {
  setSelectedMenuByRoute();
});
</script>

<template>
  <Layout class="order-management-layout">
    <!-- 左侧导航菜单 -->
    <Sider width="280" class="order-sider">
      <Menu
        mode="inline"
        :selected-keys="[selectedMenuKey]"
        :open-keys="openKeys"
        class="order-menu"
        @click="handleMenuClick"
        @open-change="handleOpenChange"
      >
        <Menu.SubMenu
          v-for="item in menuItems"
          :key="item.key"
          :title="item.label"
        >
          <template #icon>
            <IconifyIcon :icon="item.icon" />
          </template>
          <Menu.Item
            v-for="child in item.children"
            :key="child.key"
            :class="{ 'menu-item-active': selectedMenuKey === child.key }"
          >
            {{ child.label }}
          </Menu.Item>
        </Menu.SubMenu>
      </Menu>
    </Sider>

    <!-- 主内容区域 -->
    <Content class="order-content">
      <slot></slot>
    </Content>
  </Layout>
</template>

<style scoped>
.order-management-layout {
  height: 100vh;
}

.order-sider {
  background: #fff;
  border-right: 1px solid #f0f0f0;
}

.sider-header {
  padding: 16px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

.order-menu {
  border-right: none;
}

.menu-item-active {
  color: #1890ff !important;
  background-color: #e6f7ff !important;
}

.order-content {
  overflow-y: auto;
  background: #f5f5f5;
}

:deep(.ant-menu-submenu-title) {
  font-weight: 500;
}

:deep(.ant-menu-item) {
  padding-left: 48px !important;
  margin: 0;
}

:deep(.ant-menu-submenu) {
  margin-bottom: 8px;
}
</style>
